<template>
  <el-dialog
    :title="showTitle"
    :visible="showDialog"
    @close="handleColse"
  >
    <!-- 添加子部门的表单 -->
    <el-form ref="deptForm" :model="deptForm" :rules="deptRules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" size="mini" style="width: 80%" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" size="mini" style="width: 80%" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <!-- 下拉列表 -->
        <el-select v-model="deptForm.managerId" size="mini" style="width: 80%" placeholder="请选择负责人">
          <!-- 下拉列表选项 -->
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="deptForm.introduce" :rows="4" type="textarea" size="mini" style="width: 80%" placeholder="1-100个字符" />
      </el-form-item>
      <el-form-item>
        <!-- 水平居中 -->
        <el-row style="width: 80%" type="flex" justify="center">
          <el-button size="mini" type="primary" @click="confirmClick">确定</el-button>
          <el-button size="mini" @click="handleColse">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addDepartmentAPI, getDepartmentDetailAPI, getDepartmentsAPI, getManagersAPI, updateDepartmentAPI } from '@/api/department'
export default {
  props: {
    // 控制显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // 接收父级部门ID
    parentId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      managerList: [],
      deptForm: {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: '' // 不需要跟本地绑定的，不是用户输入的，是父级传入的父级部门id
      },
      deptRules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '部门名称2-10个字符', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              // 获取部门列表数据
              let deptList = await getDepartmentsAPI()

              // 区分新增和编辑模式
              if (this.deptForm.id) {
                // 编辑模式
                // 对部门列表数据做筛选，排除自身，让用户输入的部门名称跟自身以外的其他部门比较
                // deptList = deptList.filter(item => {保留部门的id不是deptForm.id})
                // 举例：如果要编辑行政部(3)，那么就要排除id为3的部门，保留id不为3的部门
                deptList = deptList.filter(item => item.id !== this.deptForm.id)
              }

              // 数组some方法：遍历数组，如果数组中的元素跟某个元素相等，就结束遍历，返回true
              // 使用数组的some方法，判断用户输入的部门名称在部门列表中是否存在
              const isDouble = deptList.some(item => item.name === value)
              if (isDouble) {
                // 已存在，重复
                callback(new Error('部门名称已存在'))
              } else {
                // 不重复
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '部门编码2-10个字符', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              // 获取部门列表数据
              let deptList = await getDepartmentsAPI()

              // 区分新增和编辑模式
              if (this.deptForm.id) {
                // 编辑模式
                // 对部门列表数据做筛选，排除自身，让用户输入的部门名称跟自身以外的其他部门比较
                // deptList = deptList.filter(item => {保留部门的id不是deptForm.id})
                // 举例：如果要编辑行政部(3)，那么就要排除id为3的部门，保留id不为3的部门
                deptList = deptList.filter(item => item.id !== this.deptForm.id)
              }

              // 数组some方法：遍历数组，如果数组中的元素跟某个元素相等，就结束遍历，返回true
              // 使用数组的some方法，判断用户输入的部门编码在部门列表中是否存在
              const isDouble = deptList.some(item => item.code === value)
              if (isDouble) {
                // 已存在，重复
                callback(new Error('部门编码已存在'))
              } else {
                // 不重复
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        managerId: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 100, message: '部门介绍1-100个字符', trigger: 'blur' }
        ]
        // pid: '' // 不需要校验，不是用户输入的，是父级传入的父级部门id
      }
    }
  },
  computed: {
    // 复习：计算属性的结果跟函数计算的结果区别在于计算属性的结果会有缓存
    showTitle() {
      // return 如果是编辑模式 ? '编辑部门' : '添加部门'
      return this.deptForm.id ? '编辑部门' : '添加部门'
    }
  },
  created() {
    // console.log(this.parentId)
    // 获取部门负责人列表数据
    this.getManagerList()
  },
  methods: {
    // 动态生成弹层标题
    // showTitle() {
    //   // return 如果是编辑模式 ? '编辑部门' : '添加部门'
    //   return this.deptForm.id ? '编辑部门' : '添加部门'
    // },
    // 弹层组件自己根据部门ID获取部门详情的数据并回显
    async getDepartmentDetail() {
      // console.log(this.parentId)
      // 调用部门详情数据接口方法
      // 回显部门详情: 注意看回显数据的表单绑定的是哪个数据对象
      this.deptForm = await getDepartmentDetailAPI(this.parentId)
    },
    // 确定按钮点击事件
    confirmClick() {
      // 表单做整体校验
      this.$refs.deptForm.validate(async(isOK) => {
        if (isOK) {
          // 区分编辑模式还是新增模式
          if (this.deptForm.id) {
            // 编辑模式
            await updateDepartmentAPI(this.deptForm)
            // 提示用户：'修改部门成功'
            this.$message.success('修改部门成功')
          } else {
            // 新增模式
            // 校验通过：调用添加子部门接口方法
            await addDepartmentAPI({ ...this.deptForm, pid: this.parentId })
            // 提示用户：'添加子部门成功'
            this.$message.success('添加子部门成功')
          }

          // 通知父级组件更新部门列表
          this.$emit('updateDepts')
          // 重置表单+关闭弹层
          this.handleColse()
        }
      })
    },
    // 调用部门负责人列表接口方法
    async getManagerList() {
      const managerList = await getManagersAPI()
      // console.log(managerList)
      this.managerList = managerList
    },
    // 关闭弹层
    handleColse() {
      // 还原表单数据对象的值
      this.deptForm = {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: ''
      }
      // 重置表单: resetFields 只会重置校验的错误信息和表单的默认值
      this.$refs.deptForm.resetFields()
      // 子级可以直接修改父级数据，但是会报错，违反了反向数据流原则
      // this.showDialog = false
      // 父级的数据只能父级修改：子传父
      // this.$emit('close', false)

      // 配合sync修饰符的写法
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
